<template>
	<div class="lecture">
		<TopNav />
		<div class="block">
			<div class="date">
				<el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" @change="(value) => changeHandler(value)" format="yyyy 年 MM 月 dd 日"
					value-format="yyyy-MM-dd" v-loading.fullscreen.lock="fullscreenLoading">
				</el-date-picker>
			</div>
		</div>
		<div class="list">
			<h3>授课情况</h3>
			<div class="conter">
				<div class="echarts">
					<div class="serch">
						<el-cascader :show-all-levels="false" clearable :props="defaultParams" :options="cateList"
							v-model="selectedOptions"></el-cascader>
						<el-select v-model="valueXue" clearable placeholder="请选择">
							<el-option v-for="item in optionXue" :key="item.id" :label="item.kind_name"
								:value="item.id">
							</el-option>
						</el-select>
						<el-select v-model="value2" clearable placeholder="请选择">
							<el-option v-for="item in options" :key="item.id" :label="item.nickname" :value="item.id">
							</el-option>
						</el-select>
						<el-button size="small" @click='submit'>确定</el-button>
					</div>
					<div id="users" style="width: 100%;height: 375px;"></div>
				</div>
				<div class="fenb">
					<h3>授课分布</h3>
					<ul>
						<li>
							<div id="niandata" style="width: 100%;height: 375px;"></div>
						</li>
						<li>
							<div id="bandata" style="width: 100%;height: 375px;"></div>
						</li>
						<li>
							<div id="xuekedata" style="width: 100%;height: 375px;"></div>
						</li>
					</ul>
					<div id="kechengdata" style="width: 100%;height: 375px; margin-bottom: 20px;"></div>
					<div id="kedata" style="width: 100%;height: 375px;"></div>
				</div>
				<div class="ketable">
					<h3 style="border: 0;padding-top: 0;">上课数据详情</h3>
					<el-table :data="tableData" style="width: 100%">
						<el-table-column prop="class_name" label="授课班级">
						</el-table-column>
						<el-table-column prop="username" label="授课老师">
						</el-table-column>
						<el-table-column prop="times" label="授课时长(分钟)">
						</el-table-column>
						<el-table-column prop="student" label="学生出勤情况">
						</el-table-column>
						<el-table-column prop="random_num" label="抽答次数(次)">
						</el-table-column>
						<el-table-column prop="random_student" label="抽答详情">
							<template slot-scope="scope">
								<el-button class="stu" @click="handleClick(scope.row)" type="text" size="small"><img
										src="../assets/img/check.png">抽答情况</el-button>
							</template>
						</el-table-column>
						<el-table-column prop="count_down" label="倒计时使用情况(次)">
						</el-table-column>
						<el-table-column prop="paint_brush" label="画笔使用情况(次)">
						</el-table-column>
					</el-table>
					<el-pagination background ref="pager1" @size-change="handleSizeChange"
						@current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
						layout="total, prev, pager, next" :total="total">
					</el-pagination>
				</div>
				<el-dialog title="抽答情况" :visible.sync="dialogVisible" width="800px">
					<div class="sous">
						<el-input placeholder="请输入学生姓名" v-model="inputVla"></el-input>
						<el-button size="small" icon="el-icon-search" @click='sousuo'></el-button>
					</div>
					<div class="examine">
						<el-button size="small" icon="el-icon-refresh" class="ref" @click="ref"></el-button>
						</el-button>
					</div>
					<div class="ketable" style="margin-top:11px ;">
						<el-table :data="tableDatas" :cell-style="columnStyle" style="width: 100%">
							<el-table-column prop="id" label="ID" width="50">
							</el-table-column>
							<el-table-column prop="student_name" label="学生姓名">
							</el-table-column>
							<el-table-column prop="status" label="是否点赞">
							</el-table-column>
							<el-table-column prop="createtime" label="抽答时间">
							</el-table-column>
						</el-table>
						<el-pagination background ref="pager2" @size-change="handleSizeChange1"
							@current-change="handleCurrentChange1" :current-page="currentPage1" :page-size="pageSize1"
							layout="total, prev, pager, next" :total="total1">
						</el-pagination>
					</div>
				</el-dialog>
			</div>
		</div>

	</div>
	</div>
</template>


<script>
	import TopNav from './TopNav.vue';
	// let token = sessionStorage.getItem("token");
	export default {
		name: 'index',
		components: {
			TopNav
		},
		data() {
			return {
				value1: '',
				value2: '',
				options: [],
				valueXue: '',
				optionXue: [],
				selectedOptions: '',
				cateList: [],
				defaultParams: {
					label: 'name',
					value: 'id',
					children: 'list',
				},
				fullscreenLoading: false,
				tableData: [],
				total: 0,
				currentPage: 0,
				pageSize: 0,
				tableDatas: [],
				total1: 0,
				currentPage1: 0,
				pageSize1: 0,
				dialogVisible: false,
				inputVla: '',
				ids: '',
				statr: '',
				end: '',
			token:""
			}
		},
		created(){
    this.token = sessionStorage.getItem('token')

		},
		mounted() {
			this.fetchData()
			var self = this;
			//老师列表
			this.axios({
				method: 'post',
				url: this.$api + '/index/user/getuserlist',
				data: {
					token:   this.token,
				},
			}).then(function(res) {
				self.options = res.data.data
			});
			//学科列表
			this.axios({
				method: 'post',
				url: this.$api + '/index/user/getxuekelist',
				data: {
					token:   this.token,
				},
			}).then(function(res) {
        if (res.data.code == 401) {
          self.$message({
          	message: '请登录后再操作！',
          });
          self.$router.push({
            name: 'login'
          })
        }
				self.optionXue = res.data.data

			});
      console.log(12321)
			// 班级列表
			this.axios({
				method: 'post',
				url: this.$api + '/index/resources/getGradesList',
				data: {
					token: this.token,
				},
			}).then(function(res) {
				self.cateList = res.data.data
			});
		},
		methods: {
			changeHandler(value) {
				var star = new Date(new Date(new Date(value[0]).toLocaleDateString()).getTime())
				this.fullscreenLoading = true;
				setTimeout(() => {
					this.fullscreenLoading = false;
				}, 2000);
				var starttime = (new Date(star)).getTime() / 1000;
				var endtime = (new Date(value[1] + ' 23:59:59')).getTime() / 1000;
				this.fetchData(starttime, endtime)
				this.submit(starttime, endtime)
				this.statr = starttime;
				this.end = endtime;
			},
			submit() {
				var gradeid, classid, userid, kind_id;
				if (this.selectedOptions.length === 2) {
					var GradesList = this.selectedOptions.slice(-1)
					gradeid = GradesList[0]
				} else {
					var GradesList = this.selectedOptions.slice(-1)
					classid = GradesList[0]
				}
				userid = this.value2
				kind_id = this.valueXue
				var self = this;
				var myCharts = this.$echarts.init(document.getElementById('users'));
				this.axios({
					method: 'post',
					url: this.$api + '/index/class_log/getclasslog',
					data: {
						token:   this.token,
						endtime: this.end,
						starttime: this.statr,
						gradeid: gradeid,
						// classid: classid,
						userid: userid,
						kind_id: kind_id,

					},
				}).then(function(res) {
					let timeData = res.data.data.date;
          let login=[];
          console.log(res)
          if(res.data.code==0){
            self.$alert(res.data.msg, {
              confirmButtonText: '确定',
              showClose:false,
              callback: action => {
                self.inig()
              }
            });
          }else{
            login = res.data.data.num;
          }
					var option = {
						title: {
							text: '授课总节次：15次',
							left: 'left',
							textStyle: {
								fontSize: '14',
								color: '#111'
							}
						},
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data: timeData
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: timeData
						},
						yAxis: {
							name: '授课节次',
						},
						color: '#55E4C2',
						series: [{
								type: 'line',
								stack: 'Total',
								data: login
							},

						]
					};
					myCharts.setOption(option);

				});

			},
			fetchData(starttime, endtime) {
				var self = this;
				var myCharts = this.$echarts.init(document.getElementById('users'));
				this.axios({
					method: 'post',
					url: this.$api + '/index/class_log/getclasslog',
					data: {
						token:   this.token,
						endtime: endtime,
						starttime: starttime
					},
				}).then(function(res) {
					let timeData = res.data.data.date;
					let login = res.data.data.num;
					var option = {
						title: {
							text: '授课总节次：15次',
							left: 'left',
							textStyle: {
								fontSize: '14',
								color: '#111'
							}
						},
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data: timeData
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: timeData
						},
						yAxis: {
							name: '授课节次',
						},
						color: '#55E4C2',
						series: [{
								type: 'line',
								stack: 'Total',
								data: login
							},

						]
					};
					myCharts.setOption(option);

				});
				var niandatas = this.$echarts.init(document.getElementById('niandata'));
				var bandatas = this.$echarts.init(document.getElementById('bandata'));
				var xuekedatas = this.$echarts.init(document.getElementById('xuekedata'));
				var kechengdatas = this.$echarts.init(document.getElementById('kechengdata'));
				var kedatas = this.$echarts.init(document.getElementById('kedata'));
				this.axios({
					method: 'post',
					url: this.$api + '/index/class_log/getinfo',
					data: {
						token:   this.token,
						endtime: endtime,
						starttime: starttime

					},
				}).then(function(res) {
					var niandata = res.data.data.niandata;
					var bandata = res.data.data.bandata;
					var xuekedata = res.data.data.xuekedata;
					var kechengdata = res.data.data.kechengdata;
					var kedata = res.data.data.kedata;
					//各年级授课分布饼图
					var niandataData = [];
					var bandataData = [];
					var xuekedataData = [];
					for (var i = 0; i < niandata.list.length; i++) {
						var obj = new Object();
						obj.name = niandata.list[i].ban_name;
						obj.value = niandata.list[i].number;
						niandataData[i] = obj;
					};
					for (var i = 0; i < bandata.list.length; i++) {
						var obj = new Object();
						obj.name = bandata.list[i].class_name;
						obj.value = bandata.list[i].number;
						bandataData[i] = obj;
					}
					for (var i = 0; i < xuekedata.list.length; i++) {
						var obj = new Object();
						obj.name = xuekedata.list[i].name;
						obj.value = xuekedata.list[i].number;
						xuekedataData[i] = obj;
					}
					var option = {
						title: {
							text: '各年级授课分布(' + niandata.total + ')',
							left: 'center',
							textStyle: {
								fontSize: '14',
								color: '#111',
								fontWeight: '400'
							}
						},
						tooltip: {
							trigger: 'item',
							formatter: "{b} <br/>{c} : {d} %" //a 系列名称，b 数据项名称，c 数值，d 百分比
						},
						series: [{
							name: 'Access From',
							type: 'pie',
							radius: '50%',
							center: ['50%', '32%'],
							labelLine: {
								show: false
							},
							color: ['#3f5cf4', '#f5b93f', '#3CBDF6'],
							label: {
								//饼图图形上的文本标签
								normal: {
									show: true,
									position: 'inner', //标签的位置
									textStyle: {
										fontWeight: 300,
										fontSize: 12,
										color: '#fff'
									},
								}
							},
							data: niandataData,

						}]
					};
					niandatas.setOption(option);
					//各班级授课分布饼图
					var option = {
						title: {
							text: '各班级授课分布(' + bandata.total + ')',
							left: 'center',
							textStyle: {
								fontSize: '14',
								color: '#111',
								fontWeight: '400'
							}
						},
						tooltip: {
							trigger: 'item',
							formatter: "{b} <br/>{c} : {d} %" //a 系列名称，b 数据项名称，c 数值，d 百分比
						},

						series: [{
							name: 'Access From',
							type: 'pie',
							radius: '50%',
							center: ['50%', '32%'],
							labelLine: {
								show: false
							},
							color: ['#3f5cf4', '#f5b93f', '#3CBDF6'],
							label: {
								//饼图图形上的文本标签
								normal: {
									show: true,
									position: 'inner', //标签的位置
									textStyle: {
										fontWeight: 300,
										fontSize: 12,
										color: '#fff'
									},
								}
							},
							data: bandataData,

						}]
					};
					bandatas.setOption(option);
					//各学科授课分布饼图
					var option = {
						title: {
							text: '各学科授课分布(' + xuekedata.total + ')',
							left: 'center',
							textStyle: {
								fontSize: '14',
								color: '#111',
								fontWeight: '400'
							}
						},
						tooltip: {
							trigger: 'item',
							formatter: "{b} <br/>{c} : {d} %" //a 系列名称，b 数据项名称，c 数值，d 百分比
						},

						series: [{
							name: 'Access From',
							type: 'pie',
							radius: '50%',
							center: ['50%', '32%'],
							labelLine: {
								show: false
							},
							color: ['#3f5cf4', '#f5b93f', '#3CBDF6'],
							label: {
								//饼图图形上的文本标签
								normal: {
									show: true,
									position: 'inner', //标签的位置
									textStyle: {
										fontWeight: 300,
										fontSize: 12,
										color: '#fff'
									},
								}
							},
							data: xuekedataData,
						}]
					};
					xuekedatas.setOption(option);
					//各课程授课分布折线图
					var option = {
						title: {
							text: '各课程授课分布',
							left: 'left',
							textStyle: {
								fontSize: '14',
								color: '#111'
							}
						},
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data: kechengdata.number
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: kechengdata.kind_item_name
						},
						yAxis: {
							name: '授课节次',
						},
						color: '#55E4C2',
						series: [{
								type: 'line',
								stack: 'Total',
								data: kechengdata.number
							},

						]
					};
					kechengdatas.setOption(option);
					//各节课授课分布分布折线图
					var option = {
						title: {
							text: '各节课授课分布',
							left: 'left',
							textStyle: {
								fontSize: '14',
								color: '#111'
							}
						},
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							data: kedata.number
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: kedata.dirname
						},
						yAxis: {
							name: '授课节次',
						},
						color: '#55E4C2',
						series: [{
								type: 'line',
								stack: 'Total',
								data: kedata.number
							},

						]
					};
					kedatas.setOption(option);
				});
				this.axios({
					method: 'post',
					url: this.$api + '/index/class_log/getClassLogList',
					data: {
						token:   this.token,
						endtime: endtime,
						starttime: starttime,
						page: this.currentPage
					},
				}).then(function(res) {
					if (self.currentPage == 1) {
						self.currentPage = 1;
					} else if (self.currentPage == self.total) {
						self.currentPage = self.total;
					}
					self.total = res.data.data.total;
					self.pageSize = Number(res.data.data.per_page);
					self.currentPage = res.data.data.current_page;
					self.tableData = res.data.data.data

				})

			},
      inig() {
        this.fetchData()
      },
			handleSizeChange: function(size) {
				this.pagesize = size;
				this.currentPage = 1;
			},
			handleCurrentChange: function(currentPage) {
				var self = this
				this.currentPage = currentPage;
				this.fetchData(self.statr, self.end, currentPage);
			},
			handleClick(row) {
				var self = this;
				this.ids = row.id;
				this.a()
			},
			a() {
				var self = this;
				this.axios({
					method: 'post',
					url: this.$api + '/index/class_log/getRandList',
					data: {
						token:   this.token,
						id: self.ids,
						page: self.currentPage1
					},
				}).then(function(res) {
					if (self.currentPage1 == 1) {
						self.currentPage1 = 1;
					} else if (self.currentPage1 == self.total1) {
						self.currentPage1 = self.total1;
					}
					self.total1 = res.data.data.total;
					self.pageSize1 = res.data.data.per_page;
					self.currentPage1 = res.data.data.current_page;
					var items = [];
					for (var i = 0; i < res.data.data.data.length; i++) {
						var item = res.data.data.data[i];
						if (item.status === '0') {
							item.status = '否'
						} else {
							item.status = '是'
						}
						items.push(item)
					}

					self.tableDatas = items

				})
				this.dialogVisible = true
			},
			sousuo() {
				var self = this
				this.axios({
					method: 'post',
					url: this.$api + '/index/class_log/getRandList',
					data: {
						token:   this.token,
						id: self.ids,
						search: self.inputVla,
						page: self.currentPage1
					},
				}).then(function(res) {
					if (self.currentPage1 == 1) {
						self.currentPage1 = 1;
					} else if (self.currentPage1 == self.total1) {
						self.currentPage1 = self.total1;
					}
					self.total1 = res.data.data.total;
					self.pageSize1 = res.data.data.per_page;
					self.currentPage1 = res.data.data.current_page;
					var items = [];
					for (var i = 0; i < res.data.data.data.length; i++) {
						var item = res.data.data.data[i];
						if (item.status === '0') {
							item.status = '否'
						} else {
							item.status = '是'
						}
						items.push(item)
					}

					self.tableDatas = items

				})
			},
			handleSizeChange1: function(size) {
				this.pagesize1 = size;
				this.currentPage1 = 1;
			},
			handleCurrentChange1: function(currentPage) {
				var self = this
				this.currentPage1 = currentPage;
				this.a(self.ids, self.inputVla, currentPage)
			},
			ref() {
				this.fullscreenLoading = true;
				setTimeout(() => {
					this.fullscreenLoading = false;
				}, 2000);
				this.axios({
					method: 'post',
					url: this.$api + '/index/class_log/getRandList',
					data: {
						token:   this.token,
						id: this.ids
					},
				}).then(function(res) {
					console.log(res)

				})
			},
			columnStyle({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (row.status === '否' && columnIndex === 2) {
					return "color:#EB0C0C"
				} else if (row.status === '是' && columnIndex === 2) {
					return "color:#55E4C2"
				}
			},
		}
	}
</script>
<style>
	.lecture .serch {
		text-align: right;
	}

	.lecture .echarts {
		padding-bottom: 40px;
	}

	.lecture .serch .el-select {
		width: 130px;
	}

	.lecture .el-input__inner {
		height: 30px;
		line-height: 30px;
		border: 1px solid #eee;
	}

	.lecture .el-input__icon {
		line-height: 30px;
	}

	.lecture .el-button--small,
	.lecture .el-button--small.is-round {
		padding: 8px 15px;
		border: 1px solid #55E4C2;
		color: #55E4C2;
	}

	.lecture .el-select-dropdown__item {
		font-size: 12px;
	}

	.lecture .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
		color: #55E4C2;
		font-weight: normal;
	}

	.lecture .el-tag {
		color: #55E4C2;
	}

	.lecture .el-select .el-tag {
		padding: 0;
		background: none;
		border: 0;
	}

	.lecture .el-cascader {
		width: 130px;
	}

	.lecture .fenb {
		padding: 40px 0;
		margin-bottom: 40px;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}

	.lecture .fenb::after {
		content: "";
		width: 100%;
		height: 1px;
		display: block;
		clear: both;
	}

	.lecture .fenb h3 {
		border: 0;
		padding-bottom: 30px;
		padding: 0;
	}

	.lecture .fenb ul {
		height: 375px;
	}

	.lecture .fenb ul ::after {
		content: "";
		width: 100%;
		height: 1px;
		display: block;
		clear: both;
	}

	.lecture .fenb h3::after {
		width: 6px;
		height: 6px;
		border-radius: 100%;
		top: 7px;
	}

	.lecture .fenb ul li {
		width: 33%;
		float: left;
	}

	.lecture .ketable {
		margin-top: 40px;
	}

	.lecture .ketable .hot {
		border: 0;
	}

	.lecture .ketable .hot::after {
		width: 6px;
		height: 6px;
		border-radius: 100%;
		top: 18px
	}

	.lecture .ketable .el-table {
		border-top: 1px solid #eee;
		border-left: 1px solid #eee;
		margin-bottom: 18px;
	}

	.lecture .ketable .el-table th {
		background: #55E4C2;
	}

	.lecture .ketable .el-table th,
	.lecture .ketable .el-table td {
		border-right: 1px solid #eee;
		border-bottom: 1px solid #eee;
		text-align: center;
		font-size: 14px;
		font-weight: 400;
		color: #111111;
	}

	.lecture .ketable .el-pagination {
		margin-bottom: 30px;
		text-align: right;
	}

	.lecture .ketable .el-pagination.is-background .el-pager li:not(.disabled).active {
		background: #55E4C2;
	}

	.lecture .examine,
	.lecture .sous {
		width: 500px;
	}

	.lecture .sous {
		float: right;
		text-align: right;
	}

	.lecture .examine .ref {
		width: 30px;
		height: 30px;
		background: #777777;
		padding: 0;
		border: 0;
	}

	.lecture .examine .ref i {
		font-size: 18px;
		color: #fff;
	}

	.lecture .examine .audit {
		width: 62px;
		height: 30px;
		background: #55E4C2;
		padding: 0;
		color: #fff;
		font-size: 14px;
		border: 0;
	}


	.lecture .sous .el-input {
		width: 191px;
		height: 30px;
	}

	.lecture .sous .el-input input {
		height: 30px;
		border: 1px solid #EEEEEE;
	}

	.lecture .sous .el-button {
		width: 30px;
		height: 30px;
		background: #F5F5F5;
		border: 1px solid #EEEEEE;
		padding: 0;
		display: inline-block;
	}

	.lecture .sous .el-button img {
		width: 8px;
		height: 8px;
	}

	.stu {
		background: #55E4C2;
		font-size: 12px;
		padding: 0 !important;
		color: #fff !important;
		padding: 5px 8px !important;
	}

	.stu img {
		display: inline-block;
		margin-right: 3px;
	}

	.stu:hover {
		background: #55E4C2 !important;
	}
</style>
